let addStr = `<form class="layui-form">
<div class="layui-form-item">
    <label class="layui-form-label">链接名称</label>
    <div class="layui-input-block">
        <input type="text" name="linkname" required   placeholder="请输入链接名称" autocomplete="off" class="layui-input" id="name">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">链接地址</label>
    <div class="layui-input-block">
        <input type="text" name="linkurl" required   placeholder="请输入链接地址" autocomplete="off" class="layui-input" id="url">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">链接描述</label>
    <div class="layui-input-block">
        <input type="text" name="linkdesc" required  placeholder="请输入链接描述" autocomplete="off" class="layui-input" id="desc">
    </div>
</div>

<div class="layui-form-item">
    <button type="button" class="layui-btn layui-btn-sm" id="upload">
        <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <input type="file" name="linkicon" id="file">
    <img src="" alt="" id="img">
</div>

<div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit >提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>
</form>`

// lay-verify="required"

function load() {
    getLinkAPI({}, function (re) {
        console.log(re);
        let arr = re.data.data;

        $('tbody').empty();
        arr.forEach(function (obj) {
            $('tbody').append(`<tr>
                                        <td id="ID">${obj.id}</td>
                                        <td>
                                            <div  class="bg">
                                                <img src="http://localhost:8888/uploads/${obj.linkicon}" alt="">
                                            </div>
                                        </td>
                                        <td>${obj.linkname}</td>
                                        <td>${obj.linkurl}</td>
                                        <td>${obj.linkdesc}</td>
                                        <td>
                                            <button type="button" class="layui-btn layui-btn-xs" id="edit_btn">编辑</button>
                                            <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" id="del_btn">删除</button>
                                        </td>
                                    </tr>`)
        })
    })
}
load();

//  添加友情链接
$('#btn').on('click', function () {
    // 弹出框内容
    layer.open({
        title: '添加友情链接',
        area: '500px',
        content: addStr,
        btn: 0,
        success: function (layero, index) {
            $('.layui-form').on('submit', function (e) {
                e.preventDefault();
                var fd = new FormData($('.layui-form')[0]);
                addLinkAPI(fd, function (re) {
                    load();
                })
                layer.close(index);
            })
        }
    });


    // 点击按钮触发input的点击事件
    $('#upload').on('click', function () {
        $('#file').click();
    })

    // 监听文件选中事件
    $('#file').change(function (e) {
        const objectURL = URL.createObjectURL(e.target.files[0])
        $('#img').attr('src', objectURL)
    })


})

// 编辑友情链接
$('tbody').on('click', '#edit_btn', function () {
    // 弹出框内容
    layer.open({
        title: '编辑友情链接',
        area: '500px',
        content: addStr,
        btn: 0,
        success: (layero, index) => {
            let theId = $(this).parent().siblings('#ID').html()
            byIdAPI(theId, function (re) {
                $('#name').val(re.data.data.linkname)
                $('#url').val(re.data.data.linkurl)
                $('#desc').val(re.data.data.linkdesc)
            })

            $('.layui-form').on('submit', function (e) {
                e.preventDefault();
                var fd = new FormData($('.layui-form')[0]);
                editLinkAPI(theId, fd, function (re) {
                    load();
                })
                layer.close(index);
            })
        }
    });



    // 点击按钮触发input的点击事件
    $('#upload').on('click', function () {
        $('#file').click();
    })

    // 监听文件选中事件
    $('#file').change(function (e) {
        const objectURL = URL.createObjectURL(e.target.files[0])
        $('#img').attr('src', objectURL)
    })

})

// 删除友情链接步骤
$('tbody').on('click', '#del_btn', function () {
    let theId = $(this).parent().siblings('#ID').html()
    delLinkAPI(theId, function (re) {
        load();
    })
})